import React from 'react';
import { Tabs } from 'antd';
import PropTypes from 'prop-types';
import css from './index.less';
import { observer } from 'mobx-react';
const TabPane = Tabs.TabPane;

@observer
export default class Tab extends React.Component {

  static propTypes = {
    children: PropTypes.arrayOf(PropTypes.shape({
      title: PropTypes.any,
      content: PropTypes.any
    })),
  };

  static defaultProps = {
    children: [],
  };

  render() {
    const { children } = this.props;
    return (
      <div className={css.tabContainer}>
        <Tabs type="card">
          {
            children.map((item, index) => {
              return (
                <TabPane tab={item.title} key={index}>
                  {
                    item.content
                  }
                </TabPane>
              );
            })
          }
        </Tabs>
      </div>
    );
  }
}
